<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" type="text/css" href="/css/form.css" />
</head>
<body>
    <div class="left" id="left">
        <div class="left-top">ORDER聚造</div>
        <div class="left-title"><img src="/img/home.png">首页</div>
        <div class="left-title" id="left-title" @click="showtitle">
            <img src="/img/set_click.png">系统设置
            <img src="/img/jiantou.png"></div>
        <div v-for="item in list" v-if="show">
            <div class="left-text" >{{ item.text }}</div>
        </div>
    </div>  
    <div class="right">
        <div class="right-top">系统设置/人员管理/信息编辑</div>
        <div class="top-right">
            <img class="tx" src="/img/tx.png">
            <div style="color: #EAB924;">超级管理员</div>
            <div>小王，您好！</div>
            <button class="buto">退出</button>
        </div>
        <div class="right-body">
            <div class="from">
                <form action="" method="get" class="form">
                    活动名称 <input type="text" name="name" class="name"><br>
                    活动区域 <input type="text" name="address" class="address"><br>
                    活动时间 <input type="time" name="time" class="time"><br>
                    即时配送 <input type="text" name="peisong" class="peisong"><br>
                    活动性质 <input type="checkbox" name="xingzhi" class="xingzhi" checked="checked" style="width: 2rem;height: 2rem;">美食/餐厅线上活动
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 2rem;">地推活动<br>
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 6rem;">线下主题活动
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 5rem;">单纯品牌曝光<br>
                    特殊资源 <input type="radio" name="ziyuan" class="ziyuan" checked style="width: 2rem;height: 2rem;">线上品牌商赞助
                            <input type="radio" name="ziyuan" class="ziyuan" style="width: 2rem;height: 2rem;">线下场地免费<br>
                    活动形式 <input type="text" name="xingshi" class="xingshi" style="height: 6rem;"><br>
                </form>
            </div>
            <div class="from">
                <form action="" method="get" class="form">
                    活动名称 <input type="text" name="name" class="name"><br>
                    活动区域 <input type="text" name="address" class="address"><br>
                    活动时间 <input type="time" name="time" class="time"><br>
                    即时配送 <input type="text" name="peisong" class="peisong"><br>
                    活动性质 <input type="checkbox" name="xingzhi" class="xingzhi" checked="checked" style="width: 2rem;height: 2rem;">美食/餐厅线上活动
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 2rem;">地推活动<br>
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 6rem;">线下主题活动
                    <input type="checkbox" name="xingzhi" class="xingzhi" style="width: 2rem;height: 2rem;margin-left: 5rem;">单纯品牌曝光<br>
                    特殊资源 <input type="radio" name="ziyuan" class="ziyuan" checked style="width: 2rem;height: 2rem;">线上品牌商赞助
                            <input type="radio" name="ziyuan" class="ziyuan" style="width: 2rem;height: 2rem;">线下场地免费<br>
                    活动形式 <input type="text" name="xingshi" class="xingshi" style="height: 6rem;"><br>
                </form>
            </div>
            <button class="button">保存</button>
            <button class="button">取消</button>
        </div>
        
    </div> 
</body>
</html>
<script>
    var left = new Vue({
        el:'#left',
        data:{
            list:[
                { text: '单位管理' },
                { text: '权限管理' },
                { text: '菜单管理' },
                { text: '人员管理' }
            ],
            show:false
        },
        methods:{
            showtitle:function(){
                this.show = !this.show
            }
        }
    })
</script>


